<template>
  <div class="phone-management scroll">
    <div
      v-for="(wechat, index) in wechatsOnline"
      :key="index"
      class="wechat-info"
    >
      <div class="avatar-info">
        <el-avatar :size="44" :src="wechat.Avatar">
          <i class="fa fa-picture-o" aria-hidden="true" title="头像miss"></i>
        </el-avatar>
        <div class="other-info">
          <p
            class="ellipsis"
            style="color: #333333; font-size: 14px"
            :title="wechat.WeChatNick"
            v-text="wechat.WeChatNick"
          ></p>

          <template v-if="phoneState[wechat.WeChatId]">
            <p class="ellipsis">电量: {{ phoneState[wechat.WeChatId].BatteryLevel }}</p>
            <p class="ellipsis">网络: {{ phoneState[wechat.WeChatId].NetType }}</p>
            <p v-if="chargingStateMap[phoneState[wechat.WeChatId].ChargingState]" class="ellipsis">
              充电方式: {{ chargingStateMap[phoneState[wechat.WeChatId].ChargingState] }}
            </p>
            <p v-else class="ellipsis">充电方式: 未知</p>
            <p class="">内存: {{ phoneState[wechat.WeChatId].SdcardFree }}</p>
          </template>
          <template v-else>
            <el-button
              class="el-button-my"
              type="text"
              size="medium"
              icon="el-icon-search"
              title="查询手机状态"
              @click="queryPhoneState(wechat)"
            >
              点击查看手机状态
            </el-button>
          </template>
        </div>
      </div>
      <div class="operation-btns">
        <el-button
          class="el-button-my"
          type="text"
          size="medium"
          icon="el-icon-switch-button"
          title="重启手机"
          style="color: red"
          @click="managerPhone(wechat, 1)"
        ></el-button>
        <el-button
          class="el-button-my"
          type="text"
          size="medium"
          icon="el-icon-upload2"
          title="上传日志"
          @click="managerPhone(wechat, 2)"
        ></el-button>
        <el-button
          class="el-button-my"
          type="text"
          size="medium"
          icon="el-icon-picture-outline-round"
          title="清除客服系统的图片缓存"
          @click="managerPhone(wechat, 4)"
        ></el-button>
        <el-button
          class="el-button-my"
          type="text"
          size="medium"
          icon="el-icon-film"
          title="清除微信的图片视频缓存"
          @click="managerPhone(wechat, 5)"
        ></el-button>
        <el-button
          class="el-button-my"
          type="text"
          size="medium"
          icon="el-icon-document-remove"
          title="清除手机缓存的文件url"
          @click="managerPhone(wechat, 6)"
        ></el-button>
        <el-button
          class="el-button-my"
          type="text"
          size="medium"
          icon="el-icon-search"
          title="查询手机状态"
          @click="queryPhoneState(wechat)"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { PhoneStateTask } from '@/api/webSocketApi'

export default {
  name: 'ToolsPhoneManagement',
  data() {
    return {
      wechats: this.$store.getters['conversation/wechats'],
      // 0 未充电 1 充电中 2 已充满 4 未知
      chargingStateMap: {
        0: '未充电',
        1: '充电中',
        2: '已充满',
        3: '已插线,未充电',
        4: '未知'
      }
    }
  },
  computed: {
    ...mapGetters({
      wechatsOnline: 'conversation/wechatsOnline',
      phoneState: 'tools/phoneState'
    })
  },
  methods: {
    // 手机操作
    managerPhone(wechat, actionNumber) {
      //   如果没有选中微信
      if (!wechat.WeChatId) {
        this.$message({
          message: '该微信不可用！',
          type: 'warning'
        })
        return
      }
      //  命令
      const command = {
        wechatId: wechat.WeChatId,
        action: actionNumber
      }
      // 提示
      const wechatNick = wechat.WeChatNick || wechat.WeChatNo
      const tip = {
        1: `重启 ${wechatNick} 所在的手机？`,
        2: `上传 ${wechatNick} 的日志？`,
        // 3: `上传 微信：${wechatNick} 的本地文件？`,
        4: `清除手机(${wechatNick})中客服系统的图片缓存？`,
        5: `清除微信(${wechatNick})的图片视频缓存？`,
        6: `清除手机(${wechatNick})缓存的文件url（用于防止重复上传）？`
      }
      this.$confirm(tip[actionNumber], '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('websocket/PhoneActionTask', command)
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 查询手机状态
    queryPhoneState(wechat) {
      if (wechat.WeChatId) {
        PhoneStateTask(wechat.WeChatId)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-management {
  flex: 1 1 auto;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;

  .wechat-info {
    width: 240px;
    height: 170px;
    border: solid #eeeeee 1px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
    margin: 5px;
    .avatar-info {
      flex: 1 1 auto;
      display: flex;
      align-items: center;

      .other-info {
        display: flex;
        flex-direction: column;
        p {
          padding: 5px 10px;
          font-size: 12px;
          width: 150px;
        }
      }
    }
    .operation-btns {
      width: 238px;
      height: 49px;
      border-radius: 0 0 5px 5px;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
